<template>
  <div class="AddOrUpdate_main add_container column_three">

    <div id="chat" class="main_main">
      <!--      <div class="formItem_header">-->
      <!--        &lt;!&ndash; 订单明细 &ndash;&gt;-->
      <!--        <div />-->
      <!--        <div class="formItem_header_operate">-->
      <!--          <a class="formItem_header_operate_item" @click="addRow">-->
      <!--            <svg-icon icon-class="新增" />-->
      <!--            <div class="item_name">添加</div>-->
      <!--          </a>-->
      <!--          <a class="formItem_header_operate_item delete" @click="deleteRow">-->
      <!--            <svg-icon icon-class="删除" />-->
      <!--            <div class="item_name">删除</div>-->
      <!--          </a>-->
      <!--        </div>-->
      <!--      </div>-->
      <div
        ref="table_container"
        class="table_container draggableTable"
      >
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          style="width: 99.9%;"
          :height="tableHeight"
          :cell-class-name="cellClassName"
          :header-cell-class-name="headerCellClassName"
          :row-class-name="rowClassName"
          @sort-change="(column)=>{sortChange(column, this)}"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" align="center" />
          <el-table-column label="收款账户" prop="accountId">
            <template slot-scope="scope">
              <!--              <el-select-->
              <!--                v-model="scope.row.accountId"-->
              <!--                placeholder="请选择"-->
              <!--              >-->
              <!--                <el-option-->
              <!--                  v-for="item in accountList"-->
              <!--                  :key="item.id"-->
              <!--                  :label="item.bankName"-->
              <!--                  :value="item.id"-->
              <!--                />-->
              <!--              </el-select>-->
              <el-input v-model="scope.row.accountName" placeholder="暂无" disabled />
            </template>
          </el-table-column>
          <el-table-column label="结算方式">
            <template slot-scope="scope">
              <!--              <DictSelect-->
              <!--                :band-value.sync="scope.row.settleMethodCode"-->
              <!--                dict-type="settleMethodCode"-->
              <!--              />-->
              <el-input v-model="scope.row.settleMethodCodeName" placeholder="暂无" disabled />
            </template>
          </el-table-column>
          <el-table-column label="手续费">
            <template slot-scope="scope">
              <el-input v-model="scope.row.servicePrice" type="number" placeholder="暂无" disabled />
            </template>
          </el-table-column>
          <el-table-column label="收款金额" prop="price">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" type="number" placeholder="暂无" disabled />
            </template>
          </el-table-column>
          <el-table-column label="收款备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" placeholder="暂无" clearable disabled />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--    <div class="main_bottom">-->
    <!--      <div>-->
    <!--        <el-button type="cancel" @click.stop="cancel">取消</el-button>-->
    <!--        <el-button @click.stop="onSubmit">确定</el-button>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { list } from '@/api/receivableAndPayable/receivableAndPayableManage/accountManagement'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    row: {}
  },
  data() {
    return {
      progressTitle: '0',
      showSchedule: false,
      showSuccess: false,
      showFail: false,
      timer: undefined,
      activeName: '1',
      accountList: [],
      tableData: [],
      isSelectPurchase: '',
      tableHeight: '185',
      selectionsAll: [], // 表格所有页选中的行
      selections: [],
      listData: []
    }
  },
  watch: {
  },
  created() {
    if (!this.id) { // 没有id就是新增
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  mounted() {
    if (this.row && this.row.length > 0) {
      this.tableData = this.row
    }
    this.getList()
  },
  methods: {
    getList() {
      list().then(res => {
        this.accountList = res.data
      })
    },
    cellClassName(data) {
      if (data.column.property == 'operate') {
        if (data.rowIndex % 2 == 0) {
          // 单数行
          return 'fixed one'
        } else {
          // 双数行
          return 'fixed two'
        }
      }
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex == this.listData.length - 1) {
        return 'addRow'
      }
    },
    headerCellClassName(data) {
      if (['accountId', 'price'].indexOf(data.column.property) != -1) {
        return 'column_bt'
      }
    },
    addRow() {
      const obj = {
        accountId: '',
        settleMethodCode: '',
        servicePrice: '',
        price: '',
        remark: ''
      }
      this.tableData.push(obj)
    },
    deleteRow() {
      this.selectionsAll.forEach(item => {
        this.tableData.splice(this.tableData.indexOf(item), 1)
      })
    },
    selectionChange(rows) {
      this.selectionsAll = rows
    },
    // onSubmit() {
    //   if (this.tableData.length == 0) {
    //     this.$message.warning('请添加跟进收款明细')
    //     return
    //   }
    //   if (this.tableData.some(item => !item.accountId)) {
    //     this.$message.warning('收款账户不能为空')
    //     return
    //   }
    //   if (this.tableData.some(item => item.price && !this.SETTINGS.reg_no_zero.test(item.price))) {
    //     this.$message.warning('收款金额未正确填写')
    //     return
    //   }
    //   if (this.tableData.filter(item => !item.price).length > 0) {
    //     this.$message.warning('收款金额不能为空')
    //     return
    //   }
    //   this.$parent.showDetail(this.tableData)
    //   this.$layer.close(this.layerid) // 关闭弹框
    // },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>

.pending_payment {
  color: #387bfc
}
.under_execution {
  color:#FF9900;
}
.adequate_space {
  color: #19be6b;
}
.insufficient_space {
  color: rgb(231, 108, 108);
}
.insufficient_space2 {
  color: rgb(255, 151, 32);
}
.revoke_space {
  color: #999999;
}
/deep/.blueColor{
  color: #387bfc;
}
/deep/.blueColor:hover {
  cursor: pointer;
}
.main_bottom{
  justify-content:end;
}
/deep/ .el-table__fixed-footer-wrapper {
  .el-table__cell:last-of-type {
    height: 39px !important;
  }
}
.customer_info{
  margin-top: 15px;
}
/deep/ .el-tabs__header{
  margin: 0 !important;
}
/deep/ .el-tabs__content{
  padding: 0 16px !important;
}
/deep/.el-table__body-wrapper {
  border-bottom: 1px solid #D6D6D6;
}
.form_item{
  border-bottom: 1px solid #D6D6D6;
  // width: 100%;
  border-bottom: 1px solid #D6D6D6;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  /deep/ .el-form-item__label:before{
    content: none;
  }
  /deep/ .el-form-item__label{
    color: #1F51B3;
    font-size: 15px;
  }
  /deep/ .el-form-item__label{
    width: 140px !important;
    margin-top: 10px;
  }
  /deep/ .el-form-item__content{
    color: #333333;
    font-size: 15px;
    flex: 1;
    width: unset;
    margin-top: 10px;
    margin-right: 0px;
  }
}
.title {
  padding-left: 20px;
  padding-bottom: 20px;
  font-size: 24px;
  width: 100%;
}
.numberComponents {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/deep/ .el-input-number.is-controls-right .el-input-number__increase {
  height: 15px;
}
.el-icon-remove {
  font-size: 25px;
  color: red;
  height: 100%;
  width: 100%;
  border: 0px;
  background-color: transparent;
}
/deep/ .el-form-item__content {
  margin-left: 0 !important;
}
/deep/ .el-form-item__label {
  text-align: right;
}
.expand_radio {
  /deep/ .el-form-item__content {
    text-align: left;
  }
}
.expand_container {
  .el-form-item {
    margin-bottom: 10px;
  }
  .expand_file {
    margin-bottom: 0px;
  }

  /deep/ .el-form-item__label {
    width: 130px !important;
  }
  /deep/ .el-form-item__content {
    width: 710px !important;
  }
}
.main_main {
  padding-top:0 !important ;
  height: 100%;
  .form_padding {
    padding: 0 !important;
    /deep/ .el-form-item {
      margin-right: 0px;
    }
    /deep/ .el-form-item__label {
      width: 120px !important;
    }
    /deep/ .el-form-item__content {
      width: 270px;
    }
    .remark {
      /deep/ .el-form-item__content {
        width: 690px !important;
        height: 60px;
        overflow-y: auto;
      }
    }
  }
}
/deep/ .el-table th.el-table__cell > .cell {
  position: unset;
}
.order_header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .info_button{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
